<template>
  <div class="scrollreveal">
    <div class="dowebok">
      <h1>scrollReveal.js演示2</h1>
      <p class="dowebok-explain">页面滚动显示动画效果，IE10 以下无效</p>
      <div class="list">
        <ul>
          <li data-scroll-reveal="enter top">
            <img src="http://cdn.dowebok.com/134/images/i2/1.jpg" alt />
          </li>
          <li data-scroll-reveal="enter right after 0.5s">
            <img src="http://cdn.dowebok.com/134/images/i2/2.jpg" alt />
          </li>
          <li data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s">
            <img src="http://cdn.dowebok.com/134/images/i2/3.jpg" alt />
          </li>
          <li data-scroll-reveal="enter top over 0.5s and move 200px">
            <img src="http://cdn.dowebok.com/134/images/i2/4.jpg" alt />
          </li>
          <li data-scroll-reveal="enter bottom over 1s and move 100px">
            <img src="http://cdn.dowebok.com/134/images/i2/5.jpg" alt />
          </li>
          <li data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s">
            <img src="http://cdn.dowebok.com/134/images/i2/6.jpg" alt />
          </li>
          <li data-scroll-reveal="enter top over 3s after 0.5s">
            <img src="http://cdn.dowebok.com/134/images/i2/7.jpg" alt />
          </li>
          <li data-scroll-reveal="enter left">
            <img src="http://cdn.dowebok.com/134/images/i2/8.jpg" alt />
          </li>
        </ul>
        <ul>
          <li data-scroll-reveal="enter top">
            <img src="http://cdn.dowebok.com/134/images/i2/9.jpg" alt />
          </li>
          <li data-scroll-reveal="enter left">
            <img src="http://cdn.dowebok.com/134/images/i2/10.jpg" alt />
          </li>
          <li data-scroll-reveal="enter top">
            <img src="http://cdn.dowebok.com/134/images/i2/11.jpg" alt />
          </li>
          <li data-scroll-reveal="enter top over 3s after 0.5s">
            <img src="http://cdn.dowebok.com/134/images/i2/12.jpg" alt />
          </li>
          <li data-scroll-reveal="enter bottom over 1s and move 100px">
            <img src="http://cdn.dowebok.com/134/images/i2/13.jpg" alt />
          </li>
          <li data-scroll-reveal="enter top over 0.5s and move 200px">
            <img src="http://cdn.dowebok.com/134/images/i2/14.jpg" alt />
          </li>
          <li data-scroll-reveal="enter top over 3s after 0.5s">
            <img src="http://cdn.dowebok.com/134/images/i2/15.jpg" alt />
          </li>
          <li data-scroll-reveal="enter right after 0.5s">
            <img src="http://cdn.dowebok.com/134/images/i2/16.jpg" alt />
          </li>
        </ul>
        <ul>
          <li data-scroll-reveal="enter top over 3s after 0.5s">
            <img src="http://cdn.dowebok.com/134/images/i2/17.jpg" alt />
          </li>
          <li data-scroll-reveal="enter left">
            <img src="http://cdn.dowebok.com/134/images/i2/18.jpg" alt />
          </li>
          <li data-scroll-reveal="enter right after 0.5s">
            <img src="http://cdn.dowebok.com/134/images/i2/19.jpg" alt />
          </li>
          <li data-scroll-reveal="enter top">
            <img src="http://cdn.dowebok.com/134/images/i2/20.jpg" alt />
          </li>
          <li data-scroll-reveal="enter bottom over 1s and move 100px">
            <img src="http://cdn.dowebok.com/134/images/i2/21.jpg" alt />
          </li>
          <li data-scroll-reveal="enter top over 0.5s and move 200px">
            <img src="http://cdn.dowebok.com/134/images/i2/22.jpg" alt />
          </li>
          <li data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s">
            <img src="http://cdn.dowebok.com/134/images/i2/23.jpg" alt />
          </li>
          <li data-scroll-reveal="enter right after 0.5s">
            <img src="http://cdn.dowebok.com/134/images/i2/24.jpg" alt />
          </li>
        </ul>
        <ul>
          <li data-scroll-reveal="enter left">
            <img src="http://cdn.dowebok.com/134/images/i2/25.jpg" alt />
          </li>
          <li data-scroll-reveal="enter top over 3s after 0.5s">
            <img src="http://cdn.dowebok.com/134/images/i2/26.jpg" alt />
          </li>
          <li data-scroll-reveal="enter bottom over 1s and move 100px">
            <img src="http://cdn.dowebok.com/134/images/i2/27.jpg" alt />
          </li>
          <li data-scroll-reveal="enter top over 0.5s and move 200px">
            <img src="http://cdn.dowebok.com/134/images/i2/28.jpg" alt />
          </li>
          <li data-scroll-reveal="enter top over 3s after 0.5s">
            <img src="http://cdn.dowebok.com/134/images/i2/29.jpg" alt />
          </li>
          <li data-scroll-reveal="enter left">
            <img src="http://cdn.dowebok.com/134/images/i2/30.jpg" alt />
          </li>
          <li data-scroll-reveal="enter top over 3s after 0.5s">
            <img src="http://cdn.dowebok.com/134/images/i2/31.jpg" alt />
          </li>
          <li data-scroll-reveal="enter bottom over 1s and move 100px">
            <img src="http://cdn.dowebok.com/134/images/i2/32.jpg" alt />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
@Component({
  components: {},
})
export default class scrollReveal extends Vue {
  public mounted() {
    
  }
}
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.dowebok {
  font-family: "Microsoft Yahei";
}
.dowebok h1 {
  margin: 60px 0 30px;
  font-size: 60px;
  font-weight: 500;
  text-align: center;
}
.dowebok-explain {
  margin-bottom: 80px;
  font-size: 14px;
  text-align: center;
}
.dowebok .list {
  width: 1064px;
  margin: 0 auto;
  overflow: hidden;
  zoom: 1;
}
.dowebok .list ul {
  float: left;
  width: 246px;
  margin: 0 10px;
  list-style-type: none;
}
.dowebok .list li {
  margin-bottom: 20px;
}
.dowebok .list img {
  width: 100%;
  border-radius: 5px;
  vertical-align: top;
}
</style>